<template>
	<view class="content">
		<view class="content1">
			
		<uni-popup :show="type === 'quxiao'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定取消此订单吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="type === 'shouhuo'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定收货吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmCollect()">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 确认支付弹窗 -->
		<uni-popup :show="type === 'paynow'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">输入安全密码</text>
				<view style="padding:0 20upx 40upx 20upx;font-size: 30upx;color: #333;text-align: center;">
					<input type="password" placeholder="请输入安全密码" v-model="safeword">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="paynow(unpayorder.id)">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 选择支付方式支付 -->
		<uni-popup :show="type === 'pay'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip" style="padding-top: 0;">
				<text class="uni-tip-content">选择支付方式</text>
				<view style="color: #666;font-size: 28upx;">
					<view>
						<radio-group @change="radioChange">
							<view v-for="(item,index) in typeItems" :key="index" class=" flex aic jsb" style="border-top: 2upx solid #eee;margin-right: 16upx;padding:20upx 20upx;">
								<view class="flex aic">
									<label class="label-2-text" :for="item.name">
										<text>{{item.name}}</text><!-- <text v-if="item.name=='balance'">￥1000.00</text> -->
									</label>
								</view>
								<radio :id="item.name" :value="index" :checked="item.checked" color="#EC6104" style="transform:scale(0.8)"></radio>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="show_safe_taost()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			我的订单
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
 
		</view>
		<view class="navbar">
			<view v-for="(navitem, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="tabClick(index)">
				{{navitem.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData('page')">
					<view v-if="tabItem.loaded === true && tabItem.orderList.length === 0" class="empty">
						<image src="/static/empty.png" mode="widthFix"></image>
						<view class="empty-tips">
							暂无数据~
						</view>
					</view>
					<view class="navbar navbar-inner" v-if="tabIndex==2&&tabItem.orderList.length >= 0">
						<view v-for="(vitem, vindex) in waitList" :key="vindex" class="nav-item" :class="{current: waitIndex === vindex}"
						 @click="waitClick(vindex)">
							{{vitem.text}}
						</view>
					</view>
					<!-- <text v-if="tabItem.loaded === true && tabItem.orderList.length === 0" style="display: block;text-align: center;height: 50vh;line-height: 50vh;font-size: 30upx;color: #666;">暂无数据...</text> -->
					<view v-for="(item,index) in tabItem.orderList" :key="index" class="order-item" @click="orderDetail(item.id)" :class="tabIndex==2?'padbox':''">
						<view style="padding: 24upx;border-bottom:2upx solid #eee;display: flex;justify-content: space-between;">
							<view class="time" style="color:#333 ;">{{item.order_no}} <text style="color: #EC6104;" v-if="item.order_type=='12'">(油卡订单)</text></view>
							<text class="state" :style="{color:(item.status!==6?'#EC6104':'#666')}">{{item.status_name}}</text>
						</view>
						<view style="border-bottom:2upx solid #eee;padding:20upx 24upx;">
							<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.items" :key="goodsIndex" style="position: relative;">
								<image class="goods-img" :src="goodsItem.images" style="width: 146upx;height: 146upx;"></image>
								<view class="flex-1" style="padding-left: 20upx;">
									<view class="flex flex-jsb" >
										<view>
											<view class="goods-info">
												{{goodsItem.title}}
											</view>
										</view>
										<view style="text-align: right;display: flex;flex-direction: column;justify-content: space-between;">
											<view>
												<view v-if="item.payment_id=='6'">{{goodsItem.integral/goodsItem.buy_number}}VS</view>
												<view v-else>￥{{goodsItem.price}}</view>
												<view style="font-size: 24upx;color: #666;margin-top: ;">x{{goodsItem.buy_number}}</view>
											</view>
										</view>
									</view>
									<view v-if="item.status==2&&goodsItem.orderaftersale==null&&Number(goodsItem.type)!==2&&item.payment_id!=='6'">
										<button class="tuibtn" style="color: #EC6104;" @click.stop="refund(item.id,goodsItem,0)">申请退款</button>
									</view>
									<view  v-if="item.status==3&&goodsItem.orderaftersale==null&&Number(goodsItem.type)!==2&&item.payment_id!=='6'">
										<button class="tuibtn" style="color: #EC6104;" @click.stop="refund(item.id,goodsItem,1)">申请退货退款</button>
									</view>
									<view  v-if="goodsItem.orderaftersale!==null&&item.status!=='4'&&Number(goodsItem.type)!==2&&item.payment_id!=='6'">
										<button class="tuibtn" style="color: #EC6104;" @click.stop="checkProgress(item)">查看退款进度</button>
									</view>
								</view>
								<!-- <view style="display: flex;flex-direction: column;justify-content: space-between;width: 310upx;">
									
								</view> -->
								
							</view>

						</view>
						<view class="goods-totalmsg">
							<view v-if="item.pay_status!=='0'" style="font-size: 26upx;margin-bottom: 8upx;">支付方式：{{item.payment_name}}</view>
							<view class="flex jsb">
								<view v-for="(exitem,ekey) in item.extension_data">
									{{exitem.price==0?'免邮':exitem.name+':'+exitem.price+'元'}}
								</view>
								<view>
									共{{item.buy_number_count}}件商品 合计: <text style="color:#EC6104;" v-if="item.payment_id=='6'">{{item.integral}}VS</text><text v-else style="color:#EC6104;">￥{{item.total_price}}</text>
								</view>
							</view>
						</view>
						<view class="btm-operate" style="display: flex;justify-content: flex-end;">
							<view style="padding-right: 32upx;" v-if="item.status==1">
								<button class="default-opbtn" style="color: #666666;border: 2upx solid #ddd;border-radius: 6upx;" @click.stop="cancelOrder(item.id)">取消订单</button>
								<button class="default-opbtn" style="color: #EC6104;border:2upx solid #EC6104;border-radius: 6upx;margin-left: 30upx;"
								 @click.stop="show_pay_toast(item)">去支付</button>
							</view>
							<view style="padding-right: 32upx;" v-if="item.status==2">
								<button class="default-opbtn" v-if="item.is_remind==0" style="color: #666666;border: 2upx solid #ddd;border-radius: 6upx;;margin-left: 30upx;"
								 @click.stop="remindgoods(item.id)">提醒发货</button>
							</view>
							<view style="padding-right: 32upx;" v-if="item.status==3">
								<!-- <button  class="default-opbtn" style="color: #666666;border: 2upx solid #ddd;border-radius: 6upx;"  @click.stop="refund(item,2)">退货退款</button> -->
								<button class="default-opbtn" style="color: #666666;border: 2upx solid #ddd;border-radius: 6upx;;margin-left: 30upx;"
								 @click.stop="checkDelivery(item)">查看物流</button>
								<button class="default-opbtn" style="color: #EC6104;border: 2upx solid #EC6104;border-radius: 6upx;;margin-left: 30upx;"
								 @click.stop="confirm(item.id)">确认收货</button>
							</view>
							<view style="padding-right: 32upx;" v-if="item.status==4||item.status==6">
								<button class="default-opbtn" style="color: #666666;border: 2upx solid #ddd;border-radius: 6upx;">查看详情</button>
							</view>
						</view>
					</view>
					<!-- <view>{{tabItem.orderList.length}}</view>v-show="tabItem.orderList.length>0" -->
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import * as util from '../../common/util.js'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken: '',
				tabCurrentIndex: 0,
				waitIndex:0,//待发货index
				unpayorder:{},// 点击的未支付的订单
				typeItems:[],//未支付订单的支付方式
				paymenttxt:'',// 支付字段
				paymentype:'',// 支付方式
				paymentindex:0,
				// 我的订单列表
				// 加载的属性
				loadingType: 0,
				flag: 0,
				// 弹窗
				type: '',
				// 取消的订单id
				cancelId: '',
				// 确认收货的id
				collectId: '',
				page_total: '',
				pageindex: 1,
				waitpageindex:1,// 
				current: '',
				safeword:'',//安全密码
				// 是否有数据
				flag: false,
				navList: [{
						state: 0,
						text: '全部',
						orderList: [],
						loadingType: 'more'
					},
					{
						state: 1,
						text: '待付款',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 2,
						text: '待发货',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 3,
						text: '待收货',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 4,
						text: '已完成',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 5,
						text: '已取消',
						orderList: [],
						loadingType: 'more',
					}
				],
				// 待收货订单分类
				waitList:[
					{
						state: 2,
						text: '发货订单',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 7,
						text: '抢购订单',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 8,
						text: '转让订单',
						orderList: [],
						loadingType: 'more',
					}
				],
			}
		},

		components: {
			uniLoadMore,
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			if(options.state!==undefined){
				let getOptions = options
				that.tabCurrentIndex = +getOptions.state;
				that.loadData()
				if (getOptions.state == 0) {
					that.loadData()
				}
			}
		},
		methods: {
			
			// 返回上一页面
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//发货tab点击
			waitClick(vindex) {
				let that = this
				that.waitIndex = vindex;
				let index = that.tabCurrentIndex;
				let navItem = that.navList[index];
				let state = that.waitList[vindex].state;
				navItem.state = state
				that.get_wait_data(state)
			},
			// 获取个人信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('user/Center', {
						token: that.userToken
					}, function(data) {
						resolve(data.data);
					})
				})
			},
			// 查看退款进度跳转到退款的详情页
			checkProgress(item) {
				uni.navigateTo({
					url:'../refund/index'
					// url:'fundetail?order='+JSON.stringify(item) 
				})
			},
			//跳转到详情页
			orderDetail(id) {
				// if(this.flag==0){
				uni.navigateTo({
					url: '../index/index?orderid=' + id
				})
				// }
				// this.flag++
			},
			// 退款和退款退货
			refund(orderid, item, type) {
				uni.navigateTo({
					url: '../refund/refund?order=' + JSON.stringify(item) + '&type=' + type + '&orderid=' + orderid
				})
			},
			//查看物流
			checkDelivery(item) {
				uni.navigateTo({
					url: '../delivery/deliverydetail?order=' + JSON.stringify(item)
				})
			},
			// 提醒发货
			remindgoods(id) {
				let that = this
				postAjax('order/remind', {
					token: that.userToken,
					order_id: id
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '提醒成功',
							icon: 'none'
						})
						let list = that.navList[0].orderList;
						let index = list.findIndex(val => val.id ===id);
						if(index !== -1){
							list[index].is_remind = 1
						}
						let payList = that.navList[2].orderList
						if (payList.length > 0) {
							let payindex = payList.findIndex(payval => payval.id === id);
							if(payindex !== -1 ){
								payList[payindex].is_remind =1;
							}
						}
					} else {
						uni.showToast({
							title: '提醒失败',
							icon: 'none'
						})
					}
				})
			},
			confirmCollect() {
				let that = this
				uni.showLoading()
				postAjax('order/Collect', {
					token: that.userToken,
					id: that.collectId
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '收货成功',
							icon: 'none'
						})
						setTimeout(() => {
							//取消订单后删除待付款中该项
							// 删除全部订单中的待付款中该项
							let list = that.navList[0].orderList;
							let index = list.findIndex(val => val.id === that.collectId);
							index !== -1 && list.splice(index, 1);
							let payList = that.navList[3].orderList
							let collectList = that.navList[4].orderList
							if (payList.length > 0) {
								let payindex = payList.findIndex(payval => payval.id === that.collectId);
								if(payindex !== -1 ){
									let odiv = payList[payindex]
									odiv.status = 4
									collectList.unshift(odiv)
									payList.splice(payindex, 1)
								}
							}
							uni.hideLoading();
						}, 300)
					} else {
						uni.showToast({
							title: '收货失败',
							icon: 'none'
						})
					}
					that.type=""
				})
			},
			// 确认收货
			confirm(id) {
				this.collectId = id
				this.type = 'shouhuo'
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//获取订单数据
			get_wait_data(state){
				let that = this 
				let index = that.tabCurrentIndex
				let navItem = that.navList[index]
				let postData={
					token: that.userToken,
					page:1,
					status: state,
					is_more: 1
				}
				console.log(postData)
				postAjax('order/Index', postData, function(data) {
					if (data.code == 0) {
						console.log(data.data.data)
						navItem.orderList = data.data.data
						that.pageindex =2
					}
				})
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let that = this
				let index = that.tabCurrentIndex;
				let navItem = that.navList[index];
				let state = navItem.state;
				let postdata = {}
				
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					that.pageindex = navItem.loadindex
					// that.pageindex=1
					return;
				}
				
				if (source === 'tabChange' && navItem.loaded !== true) {
					that.pageindex = 1
				}
				
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (source === 'page') {
					// that.pageindex++
				}
				if (state !== 0) {
					postdata = {
						token: that.userToken,
						page: that.pageindex,
						status: state,
						is_more: 1
					}
				} else {
					postdata = {
						token: that.userToken,
						page: that.pageindex
					}
				}
				console.log(postdata)
				navItem.loadingType = 'loading';
				// 我的订单列表
				let myorderList = []
				// 获取的订单数据
				postAjax('order/Index', postdata, function(data) {
					console.log(data.data)
					
					if (data.code == 0) {
						that.typeItems = data.data.payment_list
						myorderList = data.data.data
						if (myorderList.length > 0) {
							myorderList.forEach(item => {
								navItem.orderList.push(item);
							})
							if (navItem.orderList.length > 4) {
								navItem.loadingType = 'more';

							} else {
								navItem.loadingType = 'nodata';
								// that.pageindex--
							}
							that.pageindex++
							that.$set(navItem, 'loadindex', that.pageindex);
						}else {
							navItem.loadingType = 'noMore';
						}
						if(navItem.orderList.length==0){
							navItem.loadingType = 'nodata';
						}
						that.$set(navItem, 'loaded', true);
					}
				})

			},
			// 取消订单
			confirmOrder() {
				let that = this
				uni.showLoading({
					title: '请稍后'
				})
				postAjax('order/Cancel', {
					token: that.userToken,
					id: that.cancelId
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							//取消订单后删除待付款中该项
							// 删除全部订单中的待付款中该项
							let list = that.navList[0].orderList;
							let index = list.findIndex(val => val.id === that.cancelId);
							index !== -1 && list.splice(index, 1);
							let payList = that.navList[1].orderList
							if (payList.length > 0) {
								let payindex = payList.findIndex(payval => payval.id === that.cancelId);
								payindex !== -1 && payList.splice(payindex, 1);
							}
							uni.hideLoading();
						}, 600)
					} else {
						uni.showToast({
							title: '取消失败',
							icon: 'none'
						})
					}
					that.type=''
				})
			},
			// 取消订单
			cancelOrder(id) {
				this.cancelId = id
				this.type = 'quxiao'
			},
			// 显示支付弹窗
			show_pay_toast(item){
				let that = this 
				that.unpayorder = item
				that.type = 'pay'
			},
			async show_safe_taost(){
				let that = this
				let opayment = that.typeItems[that.paymentindex].payment
				let mbalance = await that.getUserInfo()
				if(opayment =='BalancePayment'){
					if(Number(mbalance.balance)<Number(that.unpayorder.total_price)){
						uni.showToast({
							icon: 'none',
							title:'余额不足'
						})
						return
					}
				}
				if(opayment=='VoluntaryPayment'){
					if(Number(that.unpayorder.integral)<=0){
						uni.showToast({
							icon: 'none',
							title:'此产品不支持VS支付'
						})
						return
					}
					if(Number(mbalance.integral)<that.unpayorder.integral){
						uni.showToast({
							icon: 'none',
							title:'VS不足'
						})
						return
					}
				}
				if(opayment=='Weixin'){
					that.paynow(that.unpayorder.id)
				}else{
					that.type = 'paynow'
				}
			},
			// 支付方式的选择
			radioChange: function(e) {
				let that = this
				that.paymentindex= e.detail.value
				that.paymenttxt = that.typeItems[that.paymentindex].name
				that.paymentype = that.typeItems[that.paymentindex].id
			},
			// 去支付
			paynow(id) {
				let that = this
				let paydata={
					token: that.userToken,
					id: id,
					payment_id:that.paymentype,
				}
				let opayment = that.typeItems[that.paymentindex].payment
				if(opayment!=='Weixin'){
					if(that.safeword==''){
						uni.showToast({title: '请输入安全密码',icon: 'none',duration: 1000});
						return
					}
					paydata.paypwd = that.safeword
				}
				console.log(paydata)
				postAjax('order/pay',paydata, function(dat) {
					if(dat.code==0){						
						if(dat.data.is_online_pay==0){
							uni.request({
								url: dat.data.data +"&token="+that.userToken+"&application=app",
								data: '',
								dataType: 'json',
								method: 'GET',										
								success: function(da) {
									
									console.log(da);
									
									if(da.data.code==0){
										uni.showToast({
											icon: 'none',
											title: '支付成功',
											duration: 3000
										});
										setTimeout(function(){
											uni.navigateTo({
												url:'../index/index?orderid=' + id
											})
										},1000)
									}else{
										uni.showToast({
											icon: 'none',
											title: '支付失败',
											duration: 3000
										});
									}																						
								},
								fail: function(data) {	
									uni.showToast({
										icon: 'none',
										title: '网络连接出错，请重试',
										duration: 3000
									});
								}
							})
							
						}else{
							let obj = dat.data.data
							// 第一种写法，传对象
							let orderInfo = JSON.stringify(obj)			
							
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo, //微信、支付宝订单数据
								success: function (res) {		
									uni.showToast({title:'支付成功'})
								},																		
								fail: function (err) {							
									uni.showToast({title:'支付失败', icon:'none'})	
								}
							});
						}
						
					}else{
						uni.showToast({
							title:dat.msg,
							icon:'none'
						})
					}
					that.safeword=''
					that.type = ''
				})

			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.content1{
		height: calc(100% - 1px);
	}
	.swiper-box {
		height: calc(100% - 124px);
		
	}

	.list-scroll-content {
		height: 100%;
	}

	.uni-swiper-item {
		height: auto;
		position: relative;
	}

	.default-opbtn {
		width: 180upx;
		height: 60upx;
		line-height: 54upx;
		text-align: center;
		font-size: 30upx;
		background: none;
		padding: 0;
		margin: 0;
		display: inline-block;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: -10vh;
		align-items: center;
		background: #fff;
	
	}
	.flex-1{
		flex:1
	}
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
	.tuibtn {
		height: 60upx;
		line-height: 54upx;
		text-align: left;
		font-size: 28upx;
		background: none;
		display: inline-block;
		padding: 0 16upx;
		margin-left: -16upx;
	}

	.default-opbtn::after,
	.tuibtn::after {
		border: none;
	}

	.goods-totalmsg {
		padding: 18upx 32upx 26upx 32upx;
		color: #666;
		font-size: 28upx;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		margin: 30upx;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		padding-bottom: 10upx;
		color: #333;
	}

	.goods-box-single {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12upx;
	}

	.pageHeader {
		position: relative;
		height: 64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 20px;
	}
	.padbox{
		margin-top:100upx;
	}
	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx
	}

	.regoodbox {
		padding: 22upx 30upx;
		background-color: #fff;
		display: flex;
	}

	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		padding: 0 10upx;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
	}
	.navbar-inner{position: fixed;top:0;left:0;width: 100%;z-index: 100;}
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}

	.current {
		color: #EC6104;
	}

	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
